<div class="grid">
  {% assign url_parts = page.url | split: '/' %}
  {% assign root = url_parts[1] %}
  {% if root == 'integrations' %}
    {% include asides/component_navigation.html %}
  {% elsif root == 'installation' %}
    {% include asides/installation_navigation.html %}
  {% elsif root == 'common-tasks' %}
    {% include asides/common_tasks_navigation.html %}
  {% elsif root == 'dashboards' %}
    {% include asides/dashboards_navigation.html %}
  {% elsif root == 'developers' or root == 'help' %}
    {% include asides/help_navigation.html %}
  {% elsif root == 'getting-started' %}
    {% include asides/getting_started_navigation.html %}
  {% elsif root == 'docs' %}
    {% include asides/docs_navigation.html %}
  {% elsif root == 'projects' %}
    {% include asides/docs_navigation.html %}
  {% elsif root == 'faq' %}
    {% include asides/faq_navigation.html %}
  {% elsif root == 'hassio' or root == 'addons' %}
    {% include asides/hassio_navigation.html %}
  {% elsif root == 'cloud' %}
    {% include asides/cloud_navigation.html %}
  {% elsif root == 'conference' %}
    {% include asides/conference_navigation.html %}
  {% else %}
    {% include asides/about.html %}

    {% if page.blog_index %}
      {% include asides/categories.html %}
    {% else %}
      {% include post/sharing.html %}
      {% include asides/recent_posts.html %}
    {% endif %}
  {% endif %}
  {% if page.toc %}
    {%- unless page.no_toc -%}
      <section class="aside-module grid__item one-whole lap-one-half">
        <div class='section'>
          <h1 class="title delta">On this page</h1>
          {{ content | toc_only }}
        </div>
      </section>
    {%- endunless -%}
  {% endif %}
</div>
<script type="text/javascript">
  // Some sidebars are longer than the screen so they can't be locked.
  document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.querySelector("#sidebar").querySelector(".grid");
    const footer = document.querySelector("footer").querySelector(".grid")
    if (sidebar) {
      const content = document.querySelector(".page-content").querySelector(".grid-wrapper");
      const windowHeight = window.innerHeight - 82;
      if (sidebar.clientHeight > content.clientHeight || sidebar.clientHeight > windowHeight - footer.clientHeight) {
        sidebar.style.display = "contents"
      }
    }
  });
</script>
